<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Object Oriented JavaScript Projects</title>

		<style type="text/css">
			body, html{height:100%;width:100%;background:#000;color:#fff;}
			body,html,h1,h2,p{margin:0;padding:0;font-size:1em;}
			a{color:#09c;}
			#menu{background: #111;color: #fff;text-align: right;}
			#content{padding:25px;background:#FF8A00;}
			.category{background:#111;margin-bottom:25px;}
			.category>h1{font-family:serif;font-size:2em;font-weight:normal;padding:.5em;color:#FFECC0;}
			.category>p{padding:0 2em;color:#ccc;}
			.item{float:left;width:150px;height:110px;background:#111;padding:.5em;margin:.5em;overflow:hidden;}
			.item:hover{background:#333;}
			.item h2{}
			.item p{font-size:.7em;}
		</style>
	</head>
	<body>
		<div id="menu">
			Travis Dillon's Object Oriented JavaScript Demos
		</div>
		<div id="content">

            <div class="category">
                <h1>Clocks</h1>
                <p>A bunch of different clocks.</p>

                <div class="item">
                    <h2>
                        <a href="Clock.html">7 Segment Clock</a>
                    </h2>
                    <p>Hours, minutes, and seconds in a seven segment display.</p>
                </div>

                <div class="item">
                    <h2>
                        <a href="PolarClock.html">Polar Clock</a>
                    </h2>
                    <p>
                        Polar Clock built using Paper.js.
                    </p>
                </div>

                <div class="item">
                    <h2>
                        <a href="PolarClock2.html">Polar Clock 2</a>
                    </h2>
                    <p>
                        Polar Clock built using Raphaël.
                    </p>
                </div>

                <div class="item">
                    <h2>
                        <a href="SVGClock.html">SVG Clock</a>
                    </h2>
                    <p>
                        Morphing SVG clock using Raphaël.
                    </p>
                </div>

                <div class="item">
                    <h2>
                        <a href="DiskClock.html">Disk Clock</a>
                    </h2>
                    <p>
                        Rotating clock using Paper.js.
                    </p>
                </div>

                <br style="clear:both;" />
            </div>

			<div class="category">
				<h1>Widgets</h1>
				<p>Widgets have full browser support.  They are designed to be set as widgets on a Windows XP desktop.</p>
				<div class="item">
					<h2>
						<a href="Calendar.htm">Monthly Calendar</a>
					</h2>
					<p>View a monthly calendar and easily switch the month and year.</p>
				</div>
				<div class="item">
					<h2>
						<a href="QRWidget.htm">QR Code Widget</a>
					</h2>
					<p>This tool is used to generate a QR code from any string.  Its use case it to be used as a desktop widget that can then be scanned by a mobile phone.</p>
				</div>
				<div class="item">
					<h2>
						<a href="YearlyCalendar.htm">Yearly Calendar</a>
					</h2>
					<p>View the calendar for the entire year.  This currently is set to work on a 1280x1024 monitor in portait orientation.</p>
				</div>
				<div class="item">
					<h2>
						<a href="Stopwatch.htm">Stopwatch</a>
					</h2>
					<p>Basic stopwatch funtionality.</p>
				</div>
				<br style="clear:both;" />
			</div>

			<div class="category">
				<h1>Utilities</h1>
				<p>TODO ...</p>
				<div class="item">
					<h2>
						<a href="Books.htm">Google Books - My Library - Scanner Tool</a>
					</h2>
					<p>This tool is used to generate a list of ISBN numbers for books you want to add to your library on Google books.</p>
					<p>
						<b>COMPLIANT AGENTS</b>
						Android 2.3
					</p>
				</div>

				<div class="item">
					<h2>
						<a href="PGM.html">PGM Viewer</a>
					</h2>
					<p>View PGM files.</p>
				</div>

				<div class="item">
					<h2>
						<a href="Tracker.htm">Tracker</a>
					</h2>
					<p>Load TCX files, from Google's My Tracks application for example, and compare which paths are faster between specific end points.</p>
				</div>

				<div class="item">
					<h2>
						<a href="http://mindless-drone.appspot.com/oojs/ContactDiff.htm">Google Contacts Diff Tool</a>
					</h2>
					<p>Get contact data from multiple Google accounts and identify differences and the like.</p>
					<p>
						<b>COMPLIANT AGENTS</b>
						Firefox 3.6,
						Chrome 7,
						Android 2.2
					</p>
				</div>

				<div class="item">
					<h2>
						<a href="zxing.htm">Barcode Scanner Tester</a>
					</h2>
					<p>Test the functionality of calling the barcode scanner from a webpage on an Android phone.</p>
					<p>
						<b>COMPLIANT AGENTS</b>
						Android 4.0.2
					</p>
				</div>

				<div class="item">
					<h2>
						<a href="Timer.htm">Timer</a>
					</h2>
					<p>Create multiple timers.</p>
				</div>

				<div class="item">
					<h2>
						<a href="Calculator.htm">Imperical Calculator</a>
					</h2>
					<p>TODO</p>
				</div>

				<br style="clear:both;" />
			</div>

			<div class="category">
				<h1>Contests</h1>
				<p>TODO ...</p>

				<div class="item">
					<h2>
						<a href="SameGame.htm">SameGame contest</a>
					</h2>
					<p>
						Generate solutions for the programming contest <a href="http://infinitesearchspace.dyndns.org/samegame/">here</a>.
					</p>
					<p>
						<b>COMPLIANT AGENTS</b>
						Firefox 10
					</p>
				</div>

				<div class="item">
					<h2>
						<a href="SonOfDarts.htm">Son of Darts</a>
					</h2>
					<p>
						Generates answers for this <a href="http://www.azspcs.net/Contest/SonOfDarts">contest</a>.
					</p>
				</div>

				<div class="item">
					<h2>
						<a href="Topswops.htm">Topswops</a>
					</h2>
					<p>
						Generates answers for this <a href="http://www.azspcs.net/Contest/Cards">contest</a>.
					</p>
				</div>

				<div class="item">
					<h2>
						<a href="Squares.htm">Magic Squares</a>
					</h2>
					<p>
						Just load the page. Loads odd magic squares from 5 to 27.
						This was my initial attempt to program for this <a href="http://www.azspcs.net/Contest/MagicWater">contest</a>.
					</p>
				</div>

				<div class="item">
					<h2>
						<a href="PrimalSums.htm">Primal Sums</a>
					</h2>
					<p>
						This was my initial attempt to program for this <a href="http://infinitesearchspace.dyndns.org/primesums">contest</a>.
					</p>
				</div>

				<div class="item">
					<h2>
						<a href="Orchard.html">Orchard</a>
					</h2>
					<p>
						I don't know what contest this thing was supposed to solve, and I don't think it actually works.
					</p>
				</div>

				<div class="item">
					<h2>
						<a href="Factorials.htm">Factorials</a>
					</h2>
					<p>
						Generates answers for this <a href="http://www.azspcs.net/Contest/Factorials/">contest</a>.  You have to use the console to get solutions.  Only results up to 21 are reasonable.
					</p>
				</div>

				<br style="clear:both;" />
			</div>


			<div class="category">
				<h1>Good Other</h1>
				<p>TODO ...</p>



				<div class="item">
					<h2>
						<a href="mash.htm">Baby Smash</a>
					</h2>
					<p>
						App that a kid can use to just press keys, move mouse, and click mouse.
					</p>
				</div>

				<div class="item">
					<h2>
						<a href="Names.htm">Government Names</a>
					</h2>
					<p>
						Using the SSA list of census names to view and search the name database.
					</p>
				</div>


				<div class="item">
					<h2>
						<a href="GraphTester.html">Graph Tester</a>
					</h2>
					<p>
						Generate and solve solutions for data structures and algorithm analysis course.
					</p>
				</div>

				<div class="item">
					<h2>
						<a href="Color.htm">Colors</a>
					</h2>
					<p>
						Draws a color board using HSL.
					</p>
				</div>


				<br style="clear:both;" />
			</div>

			<div class="category">
				<h1>Bad Other</h1>
				<p>TODO ...</p>

				<div class="item">
					<h2>
						<a href="Attack.htm">Zombie Simulation</a>
					</h2>
					<p>
						Simulation of zombies, hunters, and civilians.
					</p>
				</div>


				<div class="item">
					<h2>
						<a href="RESTim.htm">REST Demo Project</a>
					</h2>
					<p>
						Post and retrieve "messages".
					</p>
				</div>

				<div class="item">
					<h2>
						<a href="SunriseSunset.htm">USNO Data Visualizer</a>
					</h2>
					<p>
						View the rise/set tables from the <a href="http://aa.usno.navy.mil/data/docs/RS_OneYear.php">USNO</a> in a graphical manner.
						May only work with IE since I'm using XmlHTTPRequest.
					</p>
				</div>
				<div class="item">
					<h2>
						<a href="Polygons.htm">Polygons</a>
					</h2>
					<p>
						Make polygons and calculate area, number of points, and centroid.
					</p>
				</div>

				<div class="item">
					<h2>
						<a href="Primes.htm">Primes</a>
					</h2>
					<p>
						Generates all the prime numbers up to a given value.
					</p>
				</div>
				<div class="item">
					<h2>
						<a href="Combos.htm">Combinations</a>
					</h2>
					<p>
						Just load the page. Iterates all combinations of the numbers 1-55 by choosing 5
						elements, i.e. 55 choose 5 (arbitrarily).
					</p>
				</div>

				<div class="item">
					<h2>
						<a href="Mandelbrot.htm">Mandelbrot Set</a>
					</h2>
					<p>
						Generates the mandelbrot set. In IE (PNW) divs are used to display.
						Otherwise the canvas element is used.
						Start with small value, e.g. 50 and gradually make larger.
					</p>
				</div>

				<br style="clear:both;" />
			</div>

			<div class="category">
				<h1>Unfinished</h1>
				<p>TODO ...</p>

				<div class="item">
					<h2>
						<a href="Speed.htm">Speed</a>
					</h2>
					<p>
						Given various vehicle specifications calculate the variable, e.g. speed for a given RPM.
					</p>
				</div>

				<div class="item">
					<h2>
						<a href="Buzzword.htm">Meeting Bingo</a>
					</h2>
					<p>Pick your "buzzwords" for a meeting and get a point for each use.  Play against your friends!</p>
					<p>
						Here is the <a href="beta.Buzzword.htm">beta</a> using jQuery.  It will get rolled out once Tim gets moving.
					</p>
					<p>
						<b>COMPLIANT AGENTS</b>
						Firefox 3.6,
						Chrome 7,
						Android 2.2
					</p>
				</div>

				<div class="item">
					<h2>
						<a href="Biblio1.htm">Media Library</a>
					</h2>
					<p>Maintain all your different libraries, i.e. DVDs, books, CDs, etc.</p>
					<p>
						Here is the new <a href="MedLib.html">beta</a> media library that will not use Web SQL Database.
					</p>
					<p>
						<b>COMPLIANT AGENTS</b>
						Chrome 7,
						Android 2.2,
						<a href="http://dev.w3.org/html5/webdatabase/">uses Web SQL Database</a>
					</p>
				</div>

				<br style="clear:both;" />
			</div>


			<div class="category">
				<h1>Legacy</h1>
				<p>TODO ...</p>

				<div class="item">
					<h2>
						<a href="Playlist.htm">Playlist Generator</a>
					</h2>
					<p>
						This was used to take in a Windows Media playlist file and generate a new one by alternating the shows from different series.  It should still work, but I don't use it any more, initially I used it for WD TV.
						e.g.
						Series 1 Season 1 Episode 1
						Series 2 Season 1 Episode 1
						...
						Series N Season 1 Episode 1
						...
					</p>
				</div>

				<div class="item">
					<h2>
						<a href="BarCodeSearch.htm">Barcode Scanner Prototype</a>
					</h2>
					<p>
						Use Google Base to pull in information for scanned DVDs/Blu-rays.
					</p>
				</div>

				<div class="item">
					<h2>
						<a href="AirportStatus.htm">Airport Status</a>
					</h2>
					<p>
						Enter a airport code to load info from GOV site.  I think only works on IE in local mode (cf. XSS).
					</p>
				</div>

				<div class="item">
					<h2>
						<a href="SunriseSunset.htm">Sunrises and Sunsets</a>
					</h2>
					<p>
						TODO
					</p>
				</div>

				<br style="clear:both;" />
			</div>

		</div>
	</body>
</html>
